<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    span.pj{
      cursor: pointer;
      font-size: 30px;
    }
    .fontcolor{
      color: red;

    }    
  </style>
  <script src="js/jquery-2.1.1.min.js"></script>
  <script>
    window.onload = function () { 
      var pj_ele = ["总体评价","口味评价","环境评价","服务评价"];
      function createDiv(num,className){
        var str = "";
        for(var i = 0; i < num; i++){
          str = str + "<div class='"+ className +"'></div>"
        }
        return str;
      }
      //给body中添加4个class为pingjia的div元素
      $("body").append(createDiv(pj_ele.length,"pingjia"));
      
       //创建num个具备styleName样式的内容为星号的span元素
      function createSpan(num,className,content){
        var str = "";//str用来存放span的html内容
        for(var i = 0 ;i < num; i++){
          str  = str + "<span class='"+className+"'>"+content+"</span>"
        }
        return str;
      }      
      //给4个class为pingjia的div中添加内容（span元素）
      for(var i = 0 ;i < pj_ele.length ;i++){
        $(".pingjia").eq(i).append("<span>"+ pj_ele[i] +"</span>");
        $(".pingjia").eq(i).append(createSpan(10,"pj","&#9733;"));
      }

      // document.getElementsByClassName("zongti")[0].innerHTML = 
      //               "<span>总体评价</span>" + createSpan(5) ;
      function pingjia(element,className){
        element.click(function (e) { 
          //初始化，清除上一次点击的结果，移除所有的class：fontcolor
          for(var i = 0;i < element.length;i++){
            element.eq(i).removeClass(className);
          }
          //得到当前单击元素的序号（下标）
          var num = element.index(this);
          // 把当前元素前面以及自身添加点击之后想要的样式
          for(var i= 0 ;i <= num; i++){
            element.eq(i).addClass(className);
          }
        });
      }
      for(var i = 0; i < pj_ele.length;i++){
        pingjia($(".pingjia").eq(i).children(".pj"),"fontcolor");
      }
      
     
     
    }
  </script>
</head>
<body>
 
</body>
</html>